<template>
    <div style="float:left;margin-bottom: 10px;">
    </div>
    <el-card style="width: 100%;">
        <div style="margin-top: 20px;text-align: center;">
            <h2>生产派工</h2>
        </div>
        <div style="margin-top: 30px">
            <table border="1" style="width: 100%;height: 100%; border-collapse: collapse;text-align: right;">
                <tr style="height: 35px;">
                    <td style="text-align: left;" colspan="6">基本信息</td>
                </tr>
                <tr>
                    <td style="width: 100px;"> 单据主题:</td>
                    <td>
                        <el-input v-model="form.disTopic" style=" width: 100%" />
                    </td>
                    <td>单据编号:</td>
                    <td>
                        <el-input v-model="form.dNumber" style="width: 100%" placeholder="保存后自动生成" disabled />
                    </td>
                    <td>被派工人员:</td>
                    <td>
                        <el-input v-model="form.manpowerName" style="width: 100%" @dblclick="openDialog" />
                    </td>
                    <td>制单人员:</td>
                    <td>
                        <el-input v-model="form.addName" style="width: 100%" disabled />
                    </td>
                </tr>
                <tr>
                    <td>派工产品:</td>
                    <td>
                        <el-input v-model="form.dispatchProd" style="width: 100%"  @dblclick="dialogProductTypeSelect = true" />
                    </td>
                    <td>物料清单:</td>
                    <td>
                        <el-input v-model="form.mSubject" style="width: 100%" @dblclick="dialogProductTypeSelect1 = true" >
                        </el-input>
                    </td>
                    <td>本次派工数量:</td>
                    <td>
                        <el-input v-model="form.dThisNum" style="width: 100%">
                        </el-input>
                    </td>
                    <td>制单时间:</td>
                    <td>
                        <el-input v-model="form.addTime" style="width: 100%" disabled />                      
                    </td>
                </tr>

                <tr>
                  
                    <td>已派工数量:</td>
                    <td>
                        <el-input v-model="form.dAlreadyNum" style="width: 100%" />
                    </td>
                </tr>
            </table>
        </div>

        <!-- 派工产品 -->
        <div style="margin-top: 30px;width: 100%;">
            <span>派工产品
                <el-button size="small" @click="AddRowProduct">增行</el-button>
            </span>
            <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
                <thead>
                    <tr>
                        <!-- <th><input type="checkbox" v-model="allChecked" style="width: 30px;" /></th> -->
                        <th style="height: 40px;">序号</th>
                        <th>产品名称</th>
                        <th>产品编号</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>订单数量</th>
                        <th>本次派工数量</th>
                        <th>计划开工日期</th>
                        <th>计划完工日期</th>
                        <th>交货日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in dispatchProduction" :key="index">
                        <!-- <td><input type="checkbox" 
                                style="width: 30px;width: 100%;" /></td>-->
                        <td style=" text-align: center;">{{ index + 1 }}</td> 
                        <td>
                            <el-input v-model="item.pName" @dblclick="ProClick">
                            </el-input>
                        </td>
                        <td>
                            <el-input v-model="item.pNumber" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.pSpec" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.pUnit" style="width: 100%" disabled />
                        </td>
                       
                        <td>
                            <el-input-number v-model="item.orderNum" :min="0" controls-position="right"
                                size="large" :precision="2" :step="0.01" />
                        </td>
                        
                        <td>
                            <el-input-number v-model="item.dThisNum" :min="0" controls-position="right"
                                size="large" :precision="2" :step="0.01" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.dpStartDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.dpEndDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.dDeliveryDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 所需物料 -->
        <div style="margin-top: 30px;width: 100%;">
            <span>所需物料
                <el-button size="small" @click="AddRowMaterial">增行</el-button>
            </span>
            <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
                <thead>
                    <tr>
                        <!-- <th><input type="checkbox" v-model="allChecked3" style="width: 30px;" /></th> -->
                        <th style="height: 40px;">序号</th>
                        <th>物料名称</th>
                        <th>物料编号</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>产品比例</th>
                        <th>耗损率(%)</th>
                        <th>所需数量</th>
                        <th>到货日期</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in DispatchMateria" :key="index">
                        <!-- <td><input type="checkbox" 
                                style="width: 30px;width: 100%;" /></td> -->
                        <td style=" text-align: center;">{{ index + 1 }}</td>
                        <td>
                            <el-input v-model="item.mSubject" @dblclick="MaterialClick" />
                        </td>
                        <td>
                            <el-input v-model="item.dNumber" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.mpSpec" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input v-model="item.mpUnit" style="width: 100%" disabled />
                        </td>
                        <td>
                            <el-input-number v-model="item.pRatio" :min="1" controls-position="right"
                                size="large" />
                        </td>
                        <td>
                            <el-input v-model="item.pStock" style="width: 100%" />
                        </td>
                        <td>
                            <el-input-number v-model="item.needNum" :min="1" controls-position="right" size="large" />
                        </td>
                        <td>
                            <el-date-picker v-model="item.arrivalDate" type="date" format="YYYY/MM/DD"
                                style="width: 100%" />
                        </td>
                        <td>
                            <el-input v-model="item.remark" style="width: 100%" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 附件 -->
        <div style="margin-top: 30px">
            <table border="1" style="width: 100%;height: 100%; border-collapse: collapse;">
                <tr style="height: 50px;">
                    <td colspan="8">附件</td>
                </tr>
                <tr style="height: 80px;">

                </tr>
            </table>
        </div>
<div>
    <button @click="add">添加</button>
    </div>  
    </el-card>
 <!--父  选择产品 -->
 <el-dialog v-model="dialogProductTypeSelect" title="选择产品" width="700" :before-close="ProductTypeSelectOver">
        <template #footer>
            <div class="dialog-footer">
                <el-table :data="PPtableData" border style="width: 100%"
                        highlight-current-row  @current-change="handleSelectionChange" >
                    <el-table-column prop="productId" label="序号" width="100" align="center" />
                    <el-table-column prop="pNumber" label="产品编号" align="center" width="140" />
                    <el-table-column prop="pName" label="物品名称" align="center" />
                </el-table>
                <br>
                <el-button type="success" @click="dialogProductTypeSelect=false">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogProductTypeSelect1" title="选择物料" width="700" :before-close="ProductTypeSelectOver">
        <template #footer>
            <el-table :data="PtableData" style="width:1000px"  highlight-current-row  @current-change="handleSelectionChange1" >
                <!-- <el-table-column type="selection" width="55" /> -->
                    <el-table-column type="index"  label="序号" width="60" />
                    <el-table-column prop="mSubject" label="物料清单主题" width="180" />
                <el-table-column prop="materialNode" label="物料清单编码" width="180" />
                <el-table-column prop="pName" label="产品名称" />
                <el-table-column prop="mpSpec" label="规格型号" />
            </el-table>
            <br>
            <el-button type="success" @click="dialogProductTypeSelect1 = false">确认</el-button>
        </template>
    </el-dialog>

    <!-- 派工人员弹框 -->
    <el-dialog v-model="dialogVisible1" title="库管选择" width="1000" style="height: 700px;color:black">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick2" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="manpowerList" style="width:100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mName" label="姓名" align="center" />
                        <el-table-column prop="sectorName" label="部门" align="center" />
                        <el-table-column prop="postName" label="岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible1 = false">
                保存
            </el-button>
        </template>
    </el-dialog>


   
    <!-- 产品名称弹框 -->
    <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                        default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="productlist" border style="width: 100%" @selection-change="hand" >
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="pName" label="产品名称" align="center" />
                        <el-table-column prop="pNumber" label="产品编号" align="center" />
                        <el-table-column prop="pUnit" label="规格型号" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

 <!--物料清单弹框-->
        <el-dialog v-model="dialogVisible2" title="物料清单" width="1200" align-center>
            <div style="float:left;">
                <el-button type="primary" @click="dialogVisible2=false">
                    确认
                </el-button>
                
            </div>
            <div style="float: left;margin-left: 20px;width: 100%;margin-top: 50px;">
                <el-table :data="tableData" style="width:100%"  @selection-change="hands" >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index"  label="序号" width="60" />
                    <el-table-column prop="mSubject" label="物料清单主题" width="180" />
                <el-table-column prop="materialNode" label="物料清单编码" width="180" />
                <el-table-column prop="pName" label="产品名称" />
                <el-table-column prop="mpSpec" label="规格型号" />
                </el-table>
            </div>

        </el-dialog>
   

     
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'


const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)

const form = reactive({
  "dispatchId": 10,
  "dNumber": "",
  "disTopic": "",
 "dPickState": 1,
  "mSubject": "",
  "dMaterState": 1,
  "dState": 0,
  "warehouseStorageId": 0,
  "manpowerId": 0,
  "manpowerName": "",
  "productId": 0,
  "dAlreadyNum": 0,
  "dThisNum": 0,
  "addName": localStorage.getItem("UserName"),
  "addTime":'',
  "office_Id": "",
  "user_Id": 0,
  "dispatchProd": "",
  "dispatchProduct": [
    {
      "productId": 0,
      "pName": "",
      "pNumber": "",
      "pSpec": "",
      "pUnit": "",
      "orderNum": 0,
      "dThisNum": 0,
      "dpStartDate": "",
      "dpEndDate": "",
      "dDeliveryDate": ""
    }
  ],
  "disMaterial": [
    {
      
      "disMaterialId": 0,
      "dNumber": "",
      "materialId": 0,
      "mSubject": "",
      "warehouseStorageId": 0,
      "mpNumber": "",
      "mpName": "",
      "mpSpec": "",
      "mpUnit": "",
      "pRatio": 0,
      "pStock": 0,
      "needNum": 0,
      "arrivalDate": "",
      "remark": ""
    }
  ]

})


//#region 

//#region  派工人员

const openDialog = () => {
    dialogVisible1.value = true
    GetSectorList()
    GetManpowerList()
}

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value

}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


// 派工人多选框
const check2 = ref([])
const handleSelectionChange2 = (val: any) => {
    console.log(val)
    check2.value = val
    form.manpowerId= val[0].manpowerId
    form.manpowerName=val[0].mName

}
//物料
const check3 = ref([])
const handleSelectionChange3 = (val: any) => {
    console.log(val)
    check3.value = val
   

}
//#endregion

//#region  产品名称弹框


const ProClick = () => {
    dialogVisible.value = true
    getVendorType()
    ProductList()
}
//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const productPage = reactive({
    pindex: 1,
    psize: 100,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}

//选中的产品名称 父
const handleSelectionChange = (val: any) => {
     console.log( val)
    form.dispatchProd= val.pName
    form.productId= val.productId
}

//#endregion


//#region  物料清单

const MaterialClick = () => {
    dialogVisible2.value = true
    Show()
}

const formInline = reactive({
    pageIndex: 1,
    pageSize: 20,
})
const tableData = ref([])

const Show = () => {
    console.log(formInline)
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize,
            Office_Id:1
        }

    }).then(res => {
        console.log(res.data.data.list)
        tableData.value = res.data.data.list
    })

}

const PtableData = ref([])

const PShow = () => {
    console.log(formInline)
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize,
            Office_Id:1
        }

    }).then(res => {
        console.log(res.data.data.list)
        PtableData.value = res.data.data.list
    })

}

const PPtableData = ref([])

const PPShow = () => {
    console.log(formInline)
    axios.get(http.zblnb + '/sc/api/Material/MaterialShow', {
        params: {
            pageIndex: formInline.pageIndex,
            pageSize: formInline.pageSize,
            Office_Id:1
        }

    }).then(res => {
        console.log(res.data.data.list)
        PPtableData.value = res.data.data.list
    })

}

//多选框赋值  父 物料
const handleSelectionChange1 = (val: any) => {
    console.log(val)
    form.manpowerId= val.materialId
    form.mSubject = val.mSubject
    
    
}
//#endregion


//#region  派工产品


const dispatchProduction = ref([])
const hand= (val: any) => {  
    dispatchProduction.value = val;  
    console.log(dispatchProduction.value);  
};  
const AddRowProduct = () => {
    dispatchProduction.value.push({
      "dispatchProductId": '',
      "dNumber": "",
      "productId": '',
      "pName": "",
      "pNumber": "",
      "pSpec": "",
      "pUnit": "",
      "orderNum": '',
      "dThisNum": '',
      "dpStartDate": "",
      "dpEndDate": "",
      "dDeliveryDate": "",
      "addName": "",
      "addTime": "",
      "updName": "",
      "updTime": "",
      "delName": "",
      "delTime": "",
      "office_Id": "",
      "user_Id": ''
    })
}



//#endregion



//#region  物料
const DispatchMateria = ref([])
const hands= (val: any) => {  
    DispatchMateria.value = val;  
    console.log(DispatchMateria.value);  
    form.dNumber = val[0].mNumber
};  
const AddRowMaterial = () => {
     DispatchMateria.value.push({
     "disMaterialId": 0,
      "dNumber": "",
      "materialId": 0,
      "mSubject": "",
      "warehouseStorageId": '',
      "mpNumber": "",
      "mpName": "",
      "mpSpec": "",
      "mpUnit": "",
      "pRatio": '',
      "pStock": '',
      "needNum": '',
      "arrivalDate": "",
      "remark": ""
    })
}


//#endregion


const forms = reactive({
    SectorId: "",
})

const handleNodeClick = (data: Tree) => {
    console.log(data)
    forms.SectorId = data.value

    GetManpowerList();
}

//显示人员档案
const manpowerLists = ref([])
const GetManpowerLists = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: 1,
            Psize:20,
            SectorId: forms.SectorId || "",
        }
    })
        .then(res => {
            manpowerLists.value = res.data.data.list
        
        })
}
//#endregion
onMounted(() => {
    Show()
    PPShow();
    GetManpowerLists();
    PShow();
    Blik();
})
 
      var a=new Date()
      // 格式化为 YYYY-MM-DD  
      const year = a.getFullYear();  
      const month = String(a.getMonth() + 1).padStart(2, '0'); // 月份从0开始  
      const day = String(a.getDate()).padStart(2, '0');  
      form.addTime= `${year}-${month}-${day}`
      const dialogProductTypeSelect = ref(false)
      const dialogProductTypeSelect1 = ref(false)
      //#region 
      //获取产品列表
const tableDatas = ref([])
const GetProduct = () => {
    axios.get(http.zblnb + '/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: 1,
            PageSize: 100,
            PName: '',
            PNumber: '',
            Office_Id: '',
            ProductTypeId: 0
        }
    })
        .then(res => {
            tableDatas.value = res.data.data.list
        })
        .catch(err => {
            console.log(err)
        })
}
//多选框赋值
const Duo = ref([])
const handleSelectionChanges = (val: any) => {
    Duo.value = val
}
//关闭弹出层反填
const ProductSelectOk = () => {
    form.dispatchProd = Duo.value[0].pName
    dialogProductTypeSelect.value = false
}
//#endregion


const add=()=>{
    form.dispatchProduct = [];  
    form.disMaterial = []; 
    dispatchProduction.value.forEach(item => {  
    console.log(item);  
    const newItem = {  
     dispatchProductId: item.dispatchProductId,
     "productId": item.productId,
      "pName": item.pName,
      "pNumber": item.pNumber,
      "pSpec": item.pSpec,
      "pUnit": item.pUnit,
      "orderNum": item.orderNum,
      "dThisNum": item.dThisNum,
      "dpStartDate": item.dpStartDate,
      "dpEndDate": item.dpEndDate,
      "dDeliveryDate":  item.dDeliveryDate,

    };  

    console.log(newItem); // 调试步骤 
    if (newItem.productId != 0) {  
        form.dispatchProduct.push(newItem);  
    }  
    
});  
DispatchMateria.value.forEach(item => {  
    console.log(item);  
    const newItem = { 
      disMaterialId: item.disMaterialId,
     "materialId": item.materialId,
      "mSubject":   item.mSubject,
      "dNumber": item.dNumber,
      "warehouseStorageId": item.warehouseStorageId,
      "mpNumber": item.mpNumber,
      "mpName": item.mpName,
      "mpSpec": item.mpSpec,
      "mpUnit": item.mpUnit,
      "pRatio": item.pRatio,
      "pStock": item.pStock,
      "needNum": item.needNum,
      "arrivalDate": item.arrivalDate,
      "remark": item.remark

    //   "disMaterialId": 0,
    //   "dNumber": "",
    //   "materialId": 0,
    //   "mSubject": "",
    //   "warehouseStorageId": 0,
    //   "mpNumber": "",
    //   "mpName": "",
    //   "mpSpec": "",
    //   "mpUnit": "",
    //   "pRatio": 0,
    //   "pStock": 0,
    //   "needNum": 0,
    //   "arrivalDate": "",
    //   "remark": ""
    };  

    console.log(newItem); // 调试步骤 
    if (newItem.mpNumber != '') {   
        form.disMaterial.push(newItem) 
    }  
    
});  
console.log(form);
 axios.post(http.zblnb+'/sc/api/DisPatch/UpdDisPatch', form).then(function (res) {
   console.log(res.data);
if(res.data.data==1)
{
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
  router.push('/DisPatchShow')
}
else
{
  ElMessage.error('修改失败');
}
}
).catch(function (error) {
  console.log(error);
});
}










// 反填
//alert(route.query.id)
const Blik=()=>{
    axios.get(http.zblnb+'/sc/api/DisPatch/BlikDisPatch?DispatchId='+route.query.id).then(function (res) {
    console.log(res.data.data);
  form.dispatchId=res.data.data[0].dispatchId,
  form.dNumber=res.data.data[0].dNumber,
  form.disTopic=res.data.data[0].disTopic,
  form.dPickState=res.data.data[0].dPickState,
  form.mSubject=res.data.data[0].mSubject,
  form.dMaterState=res.data.data[0].dMaterState,
  form.dState=res.data.data[0].dState,
  form.warehouseStorageId=res.data.data[0].warehouseStorageId,
  form.manpowerId=res.data.data[0].manpowerId,
  form.manpowerName=res.data.data[0].manpowerName,
  form.productId=res.data.data[0].productId,
  form.dAlreadyNum=res.data.data[0].dAlreadyNum,
  form.dThisNum=res.data.data[0].dThisNum,
  form.addName=res.data.data[0].addName,
  form.addTime=res.data.data[0].addTime,
  form.office_Id=res.data.data[0].office_Id,
  form.user_Id=res.data.data[0].user_Id,
  form.dispatchProd=res.data.data[0].pName,
  dispatchProduction.value=res.data.data[0].dispatchProducts,
  DispatchMateria.value=res.data.data[0].disMaterials
   })
}

</script>